<!DOCTYPE html>
<html>
  <head>
    <link href="ui/theme/plus/jquery.ui.all.css?v=1" rel="stylesheet" type="text/css"/>
		<style type="text/css">
			*{font-family:Arial;font-size:11px;}
			body{background-color:#fff}
			html, body, {margin: 0;padding: 0;height: 100%;}
			#map{margin: 0;padding: 0;height: 300px;width:450px;}
			.group{font-size:11px;border:solid 0px #ddd}
			#controles{position:absolute;top:5px;left:300px;z-Index:1000;}
			#msg{border:solid 1px #ddd; background-color:#FDF1BF;height:14px;padding:5px;font-size:11px;color:#C02B55}
			#jqactividad{width:250px;height:270px;border:solid 1px #ccc;overflow:auto;}
		</style>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
		var mapa = {
			map : null,
			mapOptions : {
				zoom: 9,
				center: new google.maps.LatLng(-33.42038, -71.71586),
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				mapTypeControlOptions: {
        	style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
      	},
      	zoomControl: true,
      	zoomControlOptions: {
        	style: google.maps.ZoomControlStyle.SMALL
      	}
      },
			polyOptions : [{},
				{strokeColor: '#30C0FF',strokeOpacity: 1.0,strokeWeight: 3},
				{strokeColor: '#FF8000',strokeOpacity: 1.0,strokeWeight: 3},
				{strokeColor: '#008000',strokeOpacity: 1.0,strokeWeight: 3},
				{strokeColor: '#0000FF',strokeOpacity: 1.0,strokeWeight: 3},
				{strokeColor: '#800000',strokeOpacity: 1.0,strokeWeight: 3},
				],
			pin:['','ui/i/pin1.png','ui/i/pin2.png','ui/i/pin3.png','ui/i/pin4.png','ui/i/pin5.png'],
			init:function(){
      	this.map = new google.maps.Map(document.getElementById('map'),this.mapOptions);
      }
    }
			
		var poly=[],path=[],posActual,posAnterior;
		var msg = {div:null,divText:null,mensaje:'',show:function(mensaje){this.mensaje=mensaje;this.div=!this.div?$('#msg'):this.div;this.divText=!this.divText?$('#msg-text'):this.divText;this.divText.text(this.mensaje);this.div.fadeIn();setTimeout(function(){msg.div.fadeOut();},10000);}};
		var gpsdata = {
			seed: function () {
      	var d = new Date();
      	return d.getTime()
    	},
			cargar:function(id){
				console.log('cargar datos');
				$.ajax({
					url:'data/lobo0'+id+'.json?'+this.seed(),
					datatype:'application/json',
					success:function(data){
						data = data.d?data.d:data;
						var i = data.Table.rows.length,
						total = data.Table.rows.length,
						fila = data.Table.rows,
						grilla = ''
						cod_act=0,lat=1,lon=2,hora=3,icono=null;
						
						mapa.map.panTo(new google.maps.LatLng(fila[0][lat],fila[0][lon]));
						
						switch(id){
							case 1:icono = mapa.pin[1];poly[1] = new google.maps.Polyline(mapa.polyOptions[1]);break;
							case 2:icono = mapa.pin[2];poly[2] = new google.maps.Polyline(mapa.polyOptions[2]);break;
							case 3:icono = mapa.pin[3];poly[3] = new google.maps.Polyline(mapa.polyOptions[3]);break;
							case 4:icono = mapa.pin[4];poly[4] = new google.maps.Polyline(mapa.polyOptions[4]);break;
							case 5:icono = mapa.pin[5];poly[5] = new google.maps.Polyline(mapa.polyOptions[5]);break;
						}
						poly[id].setMap(mapa.map);
						path[id] = poly[id].getPath();
						while(i--){
							grilla+='<div onclick="gpsdata.posicionar('+fila[i][lat]+','+fila[i][lon]+',\''+fila[i][hora]+'\')">'+fila[i][hora]+'</div>';
							posActual = new google.maps.LatLng(fila[i][lat],fila[i][lon]);
							var marker = new google.maps.Marker({
								position:  posActual,
								map:       mapa.map,
								title:     fila[i][hora] + ' @ ' +posActual.toString(),
								animation: google.maps.Animation.DROP,
								icon:      icono
							});
							path[id].push(posActual);
						}

						//$('#jqactividad').html(grilla);

					},
					error:function (xhr, ajaxOptions, thrownError){
						console.log(xhr.status);
						console.log(thrownError);
					}  
				});
			},
			posicionar:function(lat,lon,hora){
				var myLatlng = new google.maps.LatLng( lat,lon );
				try{
					var marker = new google.maps.Marker({
						position: myLatlng,
						map: mapa.map,
						title: 'Hora: '+hora+' - Posicion: '+ myLatlng.toString(),animation: google.maps.Animation.DROP,
						icon:mapa.ipin
					});
	    	}catch(ex){
	    		alert('error:'+ex.description);
	    	}
			}
		}

		$(function(){

			mapa.init();
			
			$('input[type=button]').button();
			
			$('#btnCargaData01').click(function(){gpsdata.cargar(1);});
			$('#btnCargaData02').click(function(){gpsdata.cargar(2);});
			$('#btnCargaData03').click(function(){gpsdata.cargar(3);});
			$('#btnCargaData04').click(function(){gpsdata.cargar(4);});
			$('#btnCargaData05').click(function(){gpsdata.cargar(5);});

			/*
			$('#btnOcultarRuta').button().click(function(){
				poly.setVisible( !poly.getVisible()?true:false );
			});
			*/

			msg.show('mapa cargado');

		});
    </script>
	</head>
<body>
<h2>Chile es mar: Seguimiento lobos marinos via GPS</h2>
	<div id="controles" class="group">
			<div id="list" style="display:none;float:left" class="ui-state-error ui-corner-all"></div>
	</div>

	<div style="float:left;">
		<input type="button" id="btnCargaData01" value="01"><br/>
		<input type="button" id="btnCargaData02" value="02"><br/>
		<input type="button" id="btnCargaData03" value="03"><br/>
		<input type="button" id="btnCargaData04" value="04"><br/>
		<input type="button" id="btnCargaData05" value="05"><br/>
		<div id="jqactividad" class="ui-corner-all" style="display:none"></div>
	</div>

	<div style="float:left;">
		<div id="map"></div>
	</div>

	<div id="msg" style="display:none;float:left" class="ui-state-error ui-corner-all"><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span><span id="msg-text"></span></div>

</body>
</html>